//有格调: Tab切换 通用组件
<template>
  <section class="m-has-style">
    <dl @mouseover="handleOver">
      <dt>有格调</dt>
      <dd :class="{ active: kind === 'all' }" kind="all">全部</dd>
      <dd :class="{ active: kind === 'date' }" kind="date">约会聚餐</dd>
      <dd :class="{ active: kind === 'spa' }" kind="spa">丽人SPA</dd>
      <dd :class="{ active: kind === 'movie' }" kind="movie">电影演出</dd>
      <dd :class="{ active: kind === 'travel' }" kind="travel">品质出游</dd>
    </dl>
    <ul class="has-style-body">
      <li v-for="(item, index) in curList" :key="index">
        <!-- 6个卡片 -->
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <img :src="item.img" class="image" />
          <ul class="content-body">
            <li class="title">{{ item.title }}</li>
            <li class="pos">
              <span>{{ item.pos }}</span>
            </li>
            <li class="price">
              ￥<em>{{ item.price }}</em
              ><span>/起</span>
            </li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      kind: "all",
      list: {
        all: [
          {
            img: "https://img.meituan.net/phoenix/9c73cb8436c9ed74a2de1cfe02134efa197229.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
          {
            img: "https://img.meituan.net/phoenix/9c73cb8436c9ed74a2de1cfe02134efa197229.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)2",
            pos: "王府井/东单2",
            price: 142.22,
          },
        ],
        date: [
          {
            img: "https://img.meituan.net/phoenix/7ded4a80e9dab77e36798341f62f3b892240699.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
          {
            img: "https://img.meituan.net/phoenix/7ded4a80e9dab77e36798341f62f3b892240699.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
        ],
        spa: [
          {
            img: "https://img.meituan.net/phoenix/afd79aae5c4ee7c959290855d79305523581265.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
          {
            img: "https://img.meituan.net/phoenix/afd79aae5c4ee7c959290855d79305523581265.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
        ],
        movie: [
          {
            img: "https://img.meituan.net/phoenix/37b94b51e94f59190ca95562d88267a7264045.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
          {
            img: "https://img.meituan.net/phoenix/37b94b51e94f59190ca95562d88267a7264045.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
        ],
        travel: [
          {
            img: "https://img.meituan.net/phoenix/837f659cc9516c0352a33aea816aab6c105955.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
          {
            img: "https://img.meituan.net/phoenix/837f659cc9516c0352a33aea816aab6c105955.jpg@740w_416h_1e_1c",
            title: "大东(王府井店)",
            pos: "王府井/东单",
            price: 1472.8,
          },
        ],
      },
    };
  },
  computed: {
    curList() {
      //this.list['all']/this.list['spa']...
      return this.list[this.kind];
    },
  },
  methods: {
    handleOver(e) {
      // console.log(e.target);
      //<dd kind="travel" class="">品质出游</dd>
      // console.log(e.target.getAttribute("kind"));
      //null/all/spa/hotel/travel

      if (e.target.getAttribute("kind") !== null) {
        this.kind = e.target.getAttribute("kind");
      }
    },
  },
};
</script>

<style lang="scss" >
@import "@/assets/css/index/hasStyle.scss";
</style>